<template>
	<view>
		<u-navbar :autoBack="true" :border="true" fixed :placeholder='true'>
			<view slot="center" style="width: 80%;">
				<u-search placeholder="搜索聊天记录" shape="square" :showAction="false" @search="getMessage()"
					v-model="keyWord">
				</u-search>
			</view>
		</u-navbar>
		<view  style="display: flex; flex-wrap: wrap; margin:0% -0.5%; width: 100%; border-bottom: 1rpx solid #DDDDDD;padding: 2%;">
			 <view style="width: 20%;">
			 	<uni-data-select
				 :clear="false"
			 	 v-model="value"
			 	 placeholder="发送人"
			 	 :localdata="userList"
			 	 @change="change"
			 	></uni-data-select>
			 </view>

			<button class="select-date" 
			@click="show = true"
			:style="{width:userDate.starDate===null? '20%':'45%'}"
			>
			{{starDate===null?'时间':starDate+'-'+endDate}}
			</button>
			<button v-if="userDate.starDate!=null||userDate.senderId!=null" class="reset" @click="reset">重置</button>
			<view>
				<u-calendar 
				:minDate="minDate"
				:maxDate="maxDate"
				:closeOnClickOverlay="true" 
				:show="show" 
				mode="range"
				@confirm="confirm"
				@close="show = false"
				monthNum="13"
				:defaultDate="defaultDateMultiple"
				></u-calendar>
			</view>
		</view>
		<view class="message-list-count" v-show="messageList.length!=0">
			<text>{{messageList.length}}条聊天记录</text>
		</view>
		
		<view v-show="messageList.length===0" style="padding: 20%; color: #a6a6a6;">
			快速查询与{{friend.userName}}的聊天记录
		</view>
		<view v-for=" message in messageList" :key="message.id">
			<view style="display: flex;width: 93%;padding: 3%;	">
				<view>
					<u-avatar
						size="50"
						:text="getAvatar(message)"
						shape="square"
						bg-color="#0080FF"
						font-size='15'
						:src="message.avaUrl"
						>
					</u-avatar>
				</view>
				<view style="width: 100%;padding-bottom: 5%; border-bottom: 1rpx solid #DDDDDD;">
					<view style="display: flex; width: 100%;">
						<view style="padding-right: 30%;padding-left: 2%; font-size: 25rpx;color: #919191;">
							{{message.userName}}>{{message.toUserName}}
						</view>
						<view style="font-size: 25rpx;color: #919191;">
							{{message.sendTime}}
						</view>
					</view>
					<view style="margin-top: 1%;margin-left: 2%;">
						 <text>{{message.content}}</text>
					</view>
				</view>
		</view>
		
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				starDate:null,
				endDate:null,
				value:0,
				showSender:false,
				show:false,
				keyWord: '',
				maxDate: `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`,
				minDate:`${new Date().getFullYear()-1}-${new Date().getMonth()+1}-${new Date().getDate()}`,
				messageList:[],
				user:{},
				friend:{},
				defaultDateMultiple:`${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`,
				userDate:{
					userId:null,
					friendId:null,
					starDate:null,
					senderId:null,
					endDate:null,
				},
				userList:[],
			}

		},
		methods: {
			change(e){
				console.log("选择了",e)
				this.userDate.senderId = e
				uni.request({
					url:'http://localhost:8090/nailCampus/message/getMessageByFromID',
					method:'POST',
					data:this.userDate,
					success:res=>{
						this.messageList = res.data.data
						console.log(res.data.data)
					}
				})
			},
			getMessage() {
				console.log(this.keyWord)
				uni.request({
					url:'http://localhost:8090/nailCampus/message/getMessageByKeyWord/'+this.friend.id+'/'+this.keyWord,
					method:'GET',
					header:{
						"token":uni.getStorageSync("token")
					},
					success:res=>{
						this.messageList = res.data.data
						console.log(res.data.data)
					}
				})
			},
			confirm(e){
				this.starDate = e[0]
				this.endDate = e[e.length-1]
				this.userDate.starDate = e[0]+' 00:00:00'
				console.log(this.userDate.starDate)
				this.userDate.endDate = e[e.length-1]+' 00:00:00'
				console.log(this.userDate)
				this.show = false
				uni.request({
					url:'http://localhost:8090/nailCampus/message/getMessageByDate',
					method:'POST',
					data:this.userDate,
					success:res=>{
						console.log(res.data.data)
						this.messageList = res.data.data
					}
				})
			},
			reset(){
				this.userDate.starDate = null
				this.userDate.endDate = null
				this.userDate.senderId = null
				this.value = null
				this.messageList.length = 0
				this.starDate = null
				this.endDate = null
			},
			getAvatar(message){
				let text = '';
				// console.log("这是方法里边的",user);
				if(message.avaUrl == null|| message.avaUrl.length == 0){
					text = message.userName.slice(-2);
				}else{
					text = null;
				}
				return text;
			},
		},
		onLoad(options) {
			this.user = uni.getStorageSync('user')
			console.log(options.id)
			this.userDate.userId = this.user.id
			this.userDate.friendId =Number(options.id)
			console.log(this.userDate)
			uni.request({
				url:'http://localhost:8090/nailCampus/user/getUserById/'+this.userDate.friendId,
				method:'GET',
				success:res=>{
					this.friend = res.data.data
					this.userList.push({value:this.friend.id,text:this.friend.userName})
				}
			})
			this.userList.push({value:this.user.id,text:this.user.userName})
		
			
		}
	}
</script>

<style lang="less" scoped>
	.reset{
		font-size: 25rpx;
		margin:0% 1%;
	}
	.select-date{
		margin:0% 1%;
		font-size: 25rpx;
		color: #b5b5b5;
	}
	button::after{
		border: none;
	}
	.message-list-count{
		padding: 2%;
		color: #b5b5b5;
		font-size: 25rpx;
		border-bottom: 1rpx solid #DDDDDD;
	}
</style>